<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js库/mock.js"></script>
    <script src="../../js库/vue.js"></script>
    <title>css定位</title>
    <style>
        /* 
            css定位
                将盒子定在某一位置 所以定位也是在摆放盒子 按照定位的方式移动盒子
                    定位=定位模式+边偏移
                        定位模式用于指定一个元素在文档中的定位方式
                        边偏移决定了元素的最终位置

                定位模式
                    通过css的position属性来设置 值分为4个
                        static 静态定位
                        relative 相对定位
                        absolute 绝对定位
                        fixed 固定定位
                边偏移 
                    定位的盒子的最终位置 四个属性(是属性 不是值)
                        top 
                        bottom
                        left
                        right
        */
        /* 
            static(了解) 
                默认定位方式 无定位 
                    静态定位按照标准流特性摆放位置 它没有边偏移 很少使用
        */
        /* 
            relative 相对定位 不脱标
                元素移动位置时 是相对"它原来的位置"来说的(不是以父盒子为准)
                原来标准流的位置继续占有 后面的盒子仍然以标准流的方式对待它(不脱标 继续保留原来位置) 新位置不会占别人的位置
                相对定位没有脱标  最典型应用是给绝对定位当爹的

            absolute 绝对定位
                元素移动位置时 相对于祖先元素(父 爷...)来说的
                    如果没有祖先元素或者祖先元素没有定位 则以浏览器为准定位
                    如果祖先元素有定位(相对 绝对 固定) 则以最近一级有定位的祖先元素为参考点移动位置
                    绝对定位不在占有原先的位置 (随意移动位置 不占有位置)
            fixed 固定定位
                固定到浏览器可视区的位置(页面滚动时 元素位置不改变)
                   1. 以浏览器的可视窗口为参照点移动元素(不是文档)
                        和父元素没任何关系
                        不随滚动条的滚动而滚动

                   2. 固定定位不占用原先的位置(脱标)

                   固定定位还可以和版心对其对齐(算法)
                        left: 50%
                        margin-left:版心一半
            sticky 粘性定位
                相对定位和固定定位的混合
                    以浏览器的可视窗口为参照点移动元素(固定定位)
                    粘性定位占有原先的位置(相对定位)
                    必须添加4个属性中的其中一个才有效果
        */
        /*
            相对定位和绝对定位的使用场景?
            相对定位给绝对定位当爹(子绝父相)? 

                子级应该用absolute绝对定位 不会占用位置 可以放到父盒子任意位置 不会影响其它兄弟盒子
                父盒子必须要加relative相对定位 需要保留位置让其他盒子不会占用父盒子的位置
         */
            body{
                height: 3000px;
            }
        .box {
            width: 1000px;
            /* margin: 0 auto; */
            height: 700px;
            background-color: gainsboro;
            /* position: fixed; */


        }

        div.banner {
            width: 800px;
            height: 600px;
            background-color: palevioletred;
            /* margin: 50px 100px 0; */
            position: relative;
            top: 50px;
            left: 100px;
        }

        img.bg {
            width: 100%;
            height: 100%;
          
        }

        div.left {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            top: 50%;
            left: 0;
        }
        img.hot {
            height: 5%;
            width: 10%;
            position: absolute;
            top: 20px;
            right: -10px;
        }
        div.wz img {
           width: 100%;
           height: 100%;
        }
        div.wz {
            width: 100px;
            height: 100px;
            position: fixed;
            top: 50%;
            right: 10%;
        }
        div.lan {
            width: 100%;
            height: 200px;
            background-color: green;
            position: fixed;
        }
        div.bx {
            width: 900px;
            height: 1000px;
            margin: 0 auto;
            background-color: paleturquoise;
        }
        div.bx div.gg img {
            width: 100%;
            height: 100%;
        }
        div.bx div.gg  {
            width: 100px;
            height: 100px;
            position: fixed;
            left: 50%;
            margin-left: 450px;
        }
        #root {
            height: 3000px;
        }
        div.nav {
            width: 800px;
            height: 50px;
            background-color: green;
            margin: 100px auto;
            position: sticky;
            /* 当元素距可视区上为top值时 元素变固定定位 */
           top: 20px;
        }
    </style>
</head>

<body>
    
    <div id="root">
        <div class="nav">我是导航</div>
        <!-- <div class="bx">
            <div class="gg">
                <img src="../../picture/王者荣耀.png" alt="">
            </div>
        </div>
        <div class="lan"></div>
        <div class="wz">
            <img src="../../picture/王者荣耀.png" alt="">
        </div>
        <div class="box">
            <div class="banner">
                <img src="../../picture/all.jpeg" class="bg" alt="">
                <div class="left"></div>
                <img src="../../picture/1.jpg" class="hot" alt="">
            </div>
        </div>
        -->
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
            }
        },
    })
</script>

</html>